<template>
  <div>
    <h1>{{ businessId === 'add' ? '新增' : '编辑'}}商户</h1>
    <el-card shadow="never">
      <el-form @submit.native.prevent="save">
        <el-row>
          <el-col :span="3">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="businessFaceImg" style="display: inline-block;"
                action="https://upload.qiniup.com"
                :on-remove='handleRemove'
                :on-success="handleSuccessbusinessFaceImg"
                :show-file-list="false"
                :limit='1'
                :data='uploadToken'
                :before-upload="beforeUpload"
              >
                <img v-if="model.businessFaceImg" :src="model.businessFaceImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span>商户头像</span>
            </el-form-item>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="24">
                <el-form-item label="商户名称" label-width="150px">
                  <el-input v-model="model.businessName" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="法人代表" label-width="150px">
                  <el-input v-model="model.personInCharge" size="small"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码" label-width="150px">
                  <el-input v-model="model.unifiedSocialCreditCode" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号码" label-width="150px">
                  <el-input v-model="model.phone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="营业执照失效期" label-width="150px">
                  <el-input v-model="model.businessLicenseExpirationDate" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" label-width="150px">
                  <el-radio-group v-model="model.sex" @change="changeSex" size="mini">
                    <el-radio border label="1">男</el-radio>
                    <el-radio border label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="商户经营范围" label-width="150px">
                  <el-input v-model="model.fareScope" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商户主营类型" label-width="150px">
                  <el-radio-group v-model="model.businessType" @change="changeBusinessType" size="mini">
                    <el-radio border :label="item.label" v-for="item in businessTypeList" :key="item.value">
                      <span>{{item.label}}</span>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="营业状态" label-width="150px">
                  <el-radio-group v-model="model.status" @change="changeStatus" size="mini">
                    <el-radio border label="1">在营</el-radio>
                    <el-radio border label="2">修业</el-radio>
                    <el-radio border label="3">注销</el-radio>
                    <el-radio border label="4">注册</el-radio>
                    <el-radio border label="5">待绑卡</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 30px;">
          <p style="margin: 30px 0 20px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #004e66; margin-right: 10px;"></span>
          银行卡信息
          </p>
          <el-col :span="4">
            <el-form-item label="银行账户" label-width="100px">
              <el-input v-model="model.account" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开户行" label-width="100px">
              <el-input v-model="model.bank" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开户支行" label-width="100px">
              <el-input v-model="model.openBankBranch" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="开户名称" label-width="100px">
              <el-input v-model="model.accountName" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="身份证号码" label-width="100px">
              <el-input v-model="model.idNumber" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <p style="margin: 60px 0 30px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #004e66; margin-right: 10px;"></span>
        相关照片附件
        </p>
        <el-row :gutter="20">
          <el-col :span="4" style="padding-left: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="businessLicenseImg" style="display: inline-block;"
                         action="https://upload.qiniup.com"
                         :on-remove='handleRemove'
                         :on-success="handleSuccessbusinessLicenseImg"
                         :show-file-list="false"
                         :limit='1'
                         :data='uploadToken'
                         :before-upload="beforeUpload"
              >
                <img v-if="model.businessLicenseImg" :src="model.businessLicenseImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 48px;">营业执照照片</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="idCardFrontImg" style="display: inline-block;"
                         action="https://upload.qiniup.com"
                         :on-remove='handleRemove'
                         :on-success="handleSuccessidCardFrontImg"
                         :show-file-list="false"
                         :limit='1'
                         :data='uploadToken'
                         :before-upload="beforeUpload"
              >
                <img v-if="model.idCardFrontImg" :src="model.idCardFrontImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 40px;">身份证正面照片</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="idCardBackImg" style="display: inline-block;"
                         action="https://upload.qiniup.com"
                         :on-remove='handleRemove'
                         :on-success="handleSuccessidCardBackImg"
                         :show-file-list="false"
                         :limit='1'
                         :data='uploadToken'
                         :before-upload="beforeUpload"
              >
                <img v-if="model.idCardBackImg" :src="model.idCardBackImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 40px;">身份证反面照片</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="handIdCardImg" style="display: inline-block;"
                         action="https://upload.qiniup.com"
                         :on-remove='handleRemove'
                         :on-success="handleSuccesshandIdCardImg"
                         :show-file-list="false"
                         :limit='1'
                         :data='uploadToken'
                         :before-upload="beforeUpload"
              >
                <img v-if="model.handIdCardImg" :src="model.handIdCardImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 50px;">手持身份证</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="bankCardImg" style="display: inline-block;"
                         action="https://upload.qiniup.com"
                         :on-remove='handleRemove'
                         :on-success="handleSuccessbankCardImg"
                         :show-file-list="false"
                         :limit='1'
                         :data='uploadToken'
                         :before-upload="beforeUpload"
              >
                <img v-if="model.bankCardImg" :src="model.bankCardImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 50px;">银行卡照片</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="shopPhoto" style="display: inline-block;"
                         action="https://upload.qiniup.com"
                         :on-remove='handleRemove'
                         :on-success="handleSuccessshopPhoto"
                         :show-file-list="false"
                         :limit='1'
                         :data='uploadToken'
                         :before-upload="beforeUpload"
              >
                <img v-if="model.shopPhoto" :src="model.shopPhoto" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 66px;">门头照</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 30px;">
          <el-col :span="4" style="padding-left: 20px;">
            <el-form-item>
              <el-upload class="avatar-uploader" ref="standDoorImg" style="display: inline-block;"
                        action="https://upload.qiniup.com"
                        :on-remove='handleRemove'
                        :on-success="handleSuccessstandDoorImg"
                        :show-file-list="false"
                        :limit='1'
                        :data='uploadToken'
                        :before-upload="beforeUpload"
              >
                <img v-if="model.standDoorImg" :src="model.standDoorImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span style="padding-left: 60px;">站门头照</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 30px;">
          <el-col :span="8" style="color: #fff;">0</el-col>
          <el-col :span="8">
            <el-button type="primary" native-type="submit" style="background: #004e66;margin-top: 50px;">保存</el-button>
          </el-col>
          <el-col :span="8" style="color: #fff;">0</el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import MySelect from "@/components/MySelect"

  export default {
    data(){
      return {
//        businessId: 0,
        businessTypeList: [],
        model: {
          businessId: 0,
          sex: 1, //	string	true	性别 0.未知 1.男 2.女
          status: '1', // 营业状态 -1 全部 1:在营,2:修业,3:注销 4.注册 5.待绑卡
          businessType: '蔬菜', // 商户经营类型	-1 全部
          shopPhoto: '', // 门头照
          businessFaceImg: '', // 商户头像
          businessLicenseImg: '', // 营业执照照片
          bankCardImg: '', // 银行卡照片
          idCardBackImg: '', // 身份证反面照片
          idCardFrontImg: '', // 身份证正面照片
          businessName: '', // 	string	true	商户名称
          personInCharge: '', // 	string	true	法人
          phone: '', // 	string	true	手机号码
          idNumber: '', // 	string	false	身份证号码
          account: '', // 	string	false	银行账户
          bank: '', // 	string	false	开户行
          accountName: '', // 	string	false	开户名称
          openBankBranch: '', // 	string	false	开户支行
          fareScope: '', // 	string	false	商户经营范围
          unifiedSocialCreditCode: '', // 	string	false	统一社会信用代码
          businessLicenseExpirationDate: '', // 	string	false	营业执照失效期
          stallName: '', // 	string	true	摊位名称	摊位名称
          standDoorImg: '', // 站门头照
          handIdCardImg: '', //	string	false	手持身份证
        },
        uploadToken:{
          key: '',
          token: ''
        },
      }
    },
    components:{
      MySelect
    },
    props: {
      businessId: {}
    },
    watch: {
      '$store.state.app.marketId'(val, oldVal){
        this.goodsToken()
        this.getBusinessType()
        this.businessId !== 'add' && this.fetch(this.businessId)
      }
    },
    mounted() {

      /*const a = this.$route.query.a
      console.log(JSON.parse(a))*/

      this.goodsToken()
      this.getBusinessType()
      this.businessId !== 'add' && this.fetch(this.businessId)
    },
    methods: {
      mySelectedstallName(obj){
        this.model.stallName = obj.label
      },
      changeSex(val){
        this.model.sex = val
      },
      // 获取商户主营类型
      getBusinessType(){
        this.$store.dispatch('equipment/fetchBusinessType').then(
          data => {
            let items = []
            for (let item of data) {
              items.push({
                value: item.id + '',
                label: item.name
              })
            }
            this.businessTypeList = items
          }
        ).catch(err => {
          this.businessTypeList = []
        })
      },
      changeBusinessType(type){
        this.model.businessType = type + ''
        let obj = {}
        obj = this.businessTypeList.find((item)=>{
          return item.label === type
        })
        this.model.businessType = obj.label
      },
      changeStatus(val){
        this.model.status = val
      },
      handleSuccessidCardFrontImg(res, file, fileList){
        this.model.idCardFrontImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.idCardFrontImg.clearFiles()
      },
      handleSuccessidCardBackImg(res, file, fileList){
        this.model.idCardBackImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.idCardBackImg.clearFiles()
      },
      handleSuccessbankCardImg(res, file, fileList){
        this.model.bankCardImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.bankCardImg.clearFiles()
      },
      handleSuccesshandIdCardImg(res, file, fileList){
        this.model.handIdCardImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.handIdCardImg.clearFiles()
      },
      handleSuccessbusinessLicenseImg(res, file, fileList){
        this.model.businessLicenseImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.businessLicenseImg.clearFiles()
      },
      handleSuccessbusinessFaceImg(res, file, fileList){
        this.model.businessFaceImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.businessFaceImg.clearFiles()
      },
      handleSuccessshopPhoto(res, file, fileList){
        this.model.shopPhoto = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.shopPhoto.clearFiles()
      },
      handleSuccessstandDoorImg(res, file, fileList){
        this.model.standDoorImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.standDoorImg.clearFiles()
      },
      handleRemove(file, fileList) {
        console.log(file,fileList[0])
      },
      beforeUpload(file){
        const isPNG = file.type === "image/png"
        const isJPEG = file.type === "image/jpeg"
        const isJPG = file.type === "image/jpg"
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isPNG && !isJPEG && !isJPG) {
          this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!")
          return false
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!")
          return false
        }
        //将上传的文件名保存成key,把这个key拼接到外链地址
        const date = new Date()
        this.uploadToken.key=`bill${date.getFullYear()}${date.getMonth()+1}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}${Math.floor(Math.random()*100)}.${file.type.split('/')[1]}`
      },
      //获取上传文件时候的token
      goodsToken(){
        this.$store.dispatch('purchaseInfo/uptoken',{}).then(
          data => {
            this.uploadToken.token = data.data.uptoken
          }
        ).catch(err => {
        })
      },



      // 判断下，新增和编辑
      async save(){
        if(this.businessId === 'add'){
          this.$store.dispatch("business/fetchBusinessAddSave", this.model)
        }else{
          this.$store.dispatch("business/fetchBusinessEditSave", this.model)
        }
        this.$router.push('/property/business')
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      },
      // 如果是编辑, 先获取详情, 填入表单里
      async fetch(businessId){
        this.$store.dispatch("business/fetchBusinessEditDetails", {businessId}).then(data=>{
          this.model = data
        })
      }
    },
    create(){
      // 如果有businessId再执行这个函数
      this.businessId !== 'add' && this.fetch(this.businessId)
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner{
    width: 194px;
  }
  .el-radio {
    margin-right: 10px;
  }
  .el-form-item {
    margin-bottom: 2px;
  }
  .button {
    background: #64d9d6;
    color: #fff;
    margin-left: 40px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
